<template>
  <up-popup :show="show" mode="center" :closeOnClickOverlay="false" :round="10" @close="close" @open="open">
		<view class='popup'>
			<image class="popup-header" src="http://static.fastht.com/862dacc888207cbb/5f2845335ecaff21.png" mode=""></image>
			<view class="popup-content">
				<view class="popup-title">
					请先登录
				</view>
				<view class="popup-p">
					为了更好的体验服务，请先登录。
				</view>
				<view class="login-btn"  @click="getUserProfile">
					授权登录
				</view>
				<view class="login-btn cancel-btn"  @click="close" v-if="showCancel">
					取消授权
				</view>
			</view>
		</view>
	</up-popup>
</template>
<script lang="ts" setup>
import { useLogin } from '@/hooks/useLogin';
import { ref } from 'vue'

const login = useLogin()

const show = ref(false)
const showCancel = ref(false)
const close = () => {
	show.value = false
}
const open = (cancel = false) => {
  show.value = true
	showCancel.value = cancel
}

function getUserProfile() {
	login.getAuthCode({ scopes: 'snsapi_userinfo' })
}
defineExpose({
  open,
  close
})
</script>

<style scoped lang="scss">
.popup {
	width: 622rpx;
	border-radius: 24rpx;

	.popup-header {
		width: 622rpx;
		height: 377rpx;
		margin-top: -100rpx;
	}

	.popup-content {
		padding: 0 30rpx 40rpx;
		text-align: center;
	}

	.popup-title{
		font-size: 38rpx;
	}

	.popup-p{
		font-size: 28rpx;
		color: #aaa;
		margin-top: 10rpx;
	}

	.login-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90rpx;
		background: #ffb413;
		color: #fff;
		font-size: 36rpx;
		border-radius: 14rpx;
		margin-top:40rpx;
	}
	.cancel-btn{
		border:1px solid #ffb413;
		color: #ffb413;
		background-color: #fff;
		margin-top: 30rpx;
	}
}
</style>